<template>
	<div class="header_wrap">
		<div class="logo_info fl">
			<div class="info_logo fl" :style="logo_size">
				<img
					:src="logo"
					alt=""
				/>
			</div>
			<div class="enter_tit fl">
				{{ title }}
			</div>
		</div>

		<div class="router_info fl">
			<el-scrollbar wrap-class="scrollbar-wrapper">
                <div class="clearfix" :style="{width: information_routes.length * 160 / 100 + 1 + 'rem'}">
                    <div class="router_item fl choose">信息舱</div>
					<div
                        class="router_item fl"
                        @click="toPage(route)"
                        v-for="route in information_routes"
						v-if="route.id === '/RCIM-Geographic'"
                        :key="route.id"
                    >
                        {{ route.name }}
                    </div>
                    <div
                        class="router_item fl"
                        @click="toPage(route)"
                        v-for="route in information_routes"
						v-if="route.id !== '/RCIM-Geographic'"
                        :key="route.id"
                    >
                        {{ route.name }}
                    </div>
                </div>
			</el-scrollbar>
		</div>

		<div class="infor_user fr">
			<el-dropdown trigger="click" @visible-change="clickuserdrop">
				<div class="el-dropdown-link">
					<div class="user_img fl" :style="img_size">
						<img :src="avatar || userImg" alt="" />
					</div>
					<div class="user_name fl">
						系统管理员
					</div>
					<div class="triangle fl">
						<i
							class="el-icon-caret-bottom"
							:class="isdropdownUser ? 'click' : ''"
						></i>
					</div>
				</div>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item
						icon="el-icon-plus"
						@click.native="goback()"
						>返回首页</el-dropdown-item
					>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
import { mapGetters } from "vuex";
// import userImg from "$public/user.png";
export default {
	data() {
		return {
			userImg: SYSTEM_INFO.INFO_USER_LOGO,
			img_size: {
				width: SYSTEM_INFO.INFO_USER_LOGO_SIZE
			},
			isdropdownUser: false,
			title: SYSTEM_INFO.SYSTEM_NAME,
			logo: SYSTEM_INFO.INFOR_LOGO,
			logo_size: {
				width: SYSTEM_INFO.INFOR_LOGO_SIZE,
			},
            routerWidth: '300px'

		};
	},
	computed: {
		...mapGetters(["information_routes", "avatar"])
    },
    mounted() {
    },
	methods: {
		// 点击下拉
		clickuserdrop(value) {
			this.isdropdownUser = value;
		},
		goback() {
			this.$router.push({ path: "/" });
        },
        toPage(route) {
            this.$router.push({ path: route.id });
        }
	}
};
</script>

<style lang="scss" scoped>
// 头部导航
.header_wrap {
	/deep/ {
        .el-scrollbar{
            height:100%;
        }
        .el-scrollbar__wrap{
            overflow-y:hidden;
            overflow-X:hidden;
        }
	}
	width: 100%;
	height: 60px;
	@include unSelectTextPC();
	@include clearfix();
	.logo_info {
		width: 472px;
		height: 100%;
		@include clearfix();
		@include bacgroundImg("~@/assets/info_images/ent_title_bg.png");
		.info_logo {
			width: 150px;
			height: 100%;
			padding: 6px 15px;
			@include rightLine(#383c48, 1px, 48px);
			&:after {
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
			}
			img {
				width: 100%;
				height: 100%;
			}
		}
		.enter_tit {
			font-size: 20px;
			line-height: 60px;
			text-indent: 15px;
			color: #fefefe;
		}
	}
	.router_info {
        height: 100%;
        width: 1152px;
		padding-top: 20px;
		@include clearfix();
		.router_item {
			width: 145px;
			height: 100%;
			text-align: center;
			line-height: 40px;
			padding: 0 10px;
			cursor: pointer;
			@include ellipsis();
			@include bacgroundImg("~@/assets/info_images/router_bg.png");
		}
		.router_item.choose {
			@include bacgroundImg("~@/assets/info_images/router_choose_bg.png");
		}
	}
	.infor_user {
		width: 185px;
		padding: 24px 14px 0 7px;
		height: 100%;
		@include clearfix();
		.el-dropdown-link {
			width: 100%;
			height: 36px;
			@include clearfix();
			.user_img {
				width: 32px;
				height: 32px;
				margin-right: 7px;
				margin-top: 2px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.user_name {
				width: 84px;
				height: 100%;
				line-height: 36px;
				color: #fefefe;
				@include ellipsis();
			}
			.triangle {
				width: 21px;
				line-height: 36px;
				color: #fefefe;
				i {
					transition: all 0.5s;
				}
			}
			.triangle {
				.click {
					transform: rotateZ(180deg);
				}
			}
		}
	}
}
</style>
